<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="header">
            <input type="text">
            <button id="search-btn" >搜索</button>
        </div>

        <!-- 显示搜索结果 -->
        <div class="result">
            <!-- <div class="item">
                <a href="#">标题</a>
                <div class="desc">一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述</div>
                <div class="url">http://www.baidu.com</div>
            </div>
            <div class="item">
                <a href="#">标题</a>
                <div class="desc">一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述</div>
                <div class="url">http://www.baidu.com</div>
            </div>
            <div class="item">
                <a href="#">标题</a>
                <div class="desc">一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述一段描述</div>
                <div class="url">http://www.baidu.com</div>
            </div> -->
        </div>
    </div>

    

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html,body {
            height: 100%;
            background-image: url(image/QQ.jpg);
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
        }

        .container {
            width: 1000px;
            margin: 0 auto;
            background-color: rgba(255,255,255, 0.8);
            height: 100%;
            border-radius: 1%;
            padding:25px;
            overflow: auto;
        }

        .header {
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header > input {
            width: 840px;
            height: 45px;
            font-size: 22px;
            line-height: 30px;
            padding-left: 5px;
            border-radius: 8px;
        }

        .header > button {
            width: 105px;
            height: 45px;
            background-color: blue;
            color: #fff;
            font-size: 22px;
            line-height: 45px;
            border-radius: 8px;
            border:none;
        }

        .header > button:active {
            background-color: grey;
        }

        .item {
            width: 100%;
            margin-top: 20px;
        }

        .item a {
            display: block;
            height: 40px;
            font-size: 22px;
            line-height: 40px;
            font-weight: 700;
            color: rgb(255,108,55);
        }

        .item .desc i {
            color: red;
            font-style: normal;
        }

        .item .url {
            font-size: 14px;
            color: rgb(0, 128, 0);
        }

        .result .count {
            color: grey;
            margin-top: 10px;
            font-size: 5px;
        }
    </style>

    <script>
        let button = document.getElementById('search-btn');
        button.onclick = function() {
            let input = document.querySelector(".header input");
            let query = input.value;
            $.ajax({
                url:"getlist?query=" + query,
                method:"GET",
                success: function(data, status) {
                    buildResult(data);
                }
            })
        }

        function buildResult(data) {
            let result = document.querySelector(".result");
            result.innerHTML = null;
            let countDiv = document.createElement('div');
            countDiv.className = "count";
            countDiv.innerHTML = "已为您找到约" + data.length + "条相关结果"
            result.appendChild(countDiv);
            console.log(result);
            for (let item of data) {
                let itemDiv = document.createElement('div');
                itemDiv.className = "item";
                let title = document.createElement("a");
                title.href = item.url;
                title.target = "_blank";
                title.innerHTML = item.title;
                itemDiv.appendChild(title);
                let desc = document.createElement('div');
                desc.className = "desc";
                desc.innerHTML = item.desc;
                itemDiv.appendChild(desc);
                let url = document.createElement('div');
                url.className = "url";
                url.innerHTML = item.url;
                result.appendChild(itemDiv);
            }
        }
    </script>
</body>
</html>